import React, { Component } from 'react'
import '../assert/css/goodsdetail.css'
import qs from 'qs'
import Header from '../components/DefaultHeader'
import { cartadd } from '../request/cart_request'
export default class GoodsDetail extends Component {
    state = {
        goods: {}
    }
    get_goods(id) {
        this.$axios.get("/getgoodsinfo?id=" + id).then(res => {
            this.setState({ goods: res.list[0] })
        })
    }
    UNSAFE_componentWillMount() {
        const { id } = qs.parse(this.props.location.search.substring(1))
        this.get_goods(id)
    }
    add(goodsid, type ) {
        cartadd(goodsid, type).then(res => {

            if (res.code === 200) {
                this.props.getcartlist1()
            }
        })
    }
    render() {
        const { goods } = this.state
        return (
            <>
                <div className="goods-container">
                    <Header title='商品详情' />
                    {/*商品详情*/}
                    <div className="detail">
                        <img src={this.pic_path + goods.img} alt="" />
                        <div>
                            <h3 className="price">&yen;{goods.price}</h3>
                            <p>{goods.goodsname}</p>
                        </div>
                    </div>
                    {/*底部导航*/}
                    <ul className="cartbar">
                        <li>
                            <div className="icon icon-concat">客服</div>
                        </li>
                        <li>
                            <div className="icon icon-shop">店铺</div>
                        </li>
                        <li>
                            <div className="icon icon-cart" onClick={() => this.props.history.push('/cart')}>购物车</div>
                        </li>
                        <li className="btn-cart" onClick={() => this.add(goods.id, 1)}>
                            加入购物车
                        </li>
                        <li className="btn-buy">
                            立即购买
                        </li>
                    </ul>
                </div>

            </>
        )
    }
}
